<template>
    <div>
      <div class="search">
          <div class="input">
              <!-- <p><label>主子渠道：</label><el-input placeholder="请输入ID" label="条件"></el-input></p> -->
              <p>
                  <label>是否上架：</label>
                  <el-select v-model="type" placeholder="请选择">
                    <el-option
                      v-for="(item,key) in typeList"
                      :key="item.key"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
              </p>
              <p><el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button></p>
          </div>
      </div>
      <div class="add">
         <el-button type="primary" @click="dialogs">新增</el-button>
         <el-button type="danger" @click="del">批量删除</el-button>
      </div>
      <tableVue :list="list" :state="true" v-loading="pageData.loading"  @changeData="selectionVal" :total="total" @sizeChange="handSize">
          <slot>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.row,1)">编辑
                  </el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    class="del"
                    @click="handleEdit(scope.row,2)">删除</el-button>
                </template>
            </el-table-column>
          </slot>
      </tableVue>

      <dialogVue title="启动页" :dialog="dialog" @close="changeData" :state="false">
          <slot>
              <el-form :model="pageData" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                  <el-form-item label="渠道" prop="selectedOptions">
                      <el-cascader
                        :options="lord"
                        :props="defaults"
                        v-model="selectedOptions">
                      </el-cascader>
                  </el-form-item>
                  <el-form-item label="是否上架" prop="value">
                    <el-select v-model="pageData.value" placeholder="请选择">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="跳转地址" prop="pageJumpUrl">
                      <el-input v-model="pageData.pageJumpUrl" placeholder="请输入跳转地址"></el-input>
                  </el-form-item>
                  <el-form-item label="排序" prop="ordinal">
                      <el-input v-model="pageData.ordinal" placeholder="请输入排序"></el-input>
                  </el-form-item>
                  <el-form-item label="启动页图片" prop="imgUrl">
                        <el-upload
                         class="upload-demo"
                         :auto-upload='false'
                         :on-change="upload"
                         :file-list="fileList"
                         :limit="1"
                         :on-exceed	= "exceed"
                         action="https://jsonplaceholder.typicode.com/posts/"
                         :list-type="String"
                         list-type="picture">
                         <el-button size="small" type="primary">点击上传</el-button>
                       </el-upload>
                  </el-form-item>
                  <el-form-item class="confirm">
                     <el-button type="primary" v-if="btnState == '1'" @click="submitForm('ruleForm')">创建</el-button>
                     <el-button type="primary" v-if="btnState == '2'" @click="compileForm('ruleForm')">更新</el-button>
                 </el-form-item>
              </el-form>
          </slot>
      </dialogVue>

    </div>
</template>

<script>
  import Data from './AppStartData.js'
  import dialogVue from '@/components/dialog.vue'
  import tableVue from '@/components/alltable.vue'
  import { Base64 } from 'js-base64';
  import checkPermission from "@/utils/permission"; // 权限判断函数
  import {
    appList,
    allChannel,
    addAppStart,
    delAppStart,
    compileAppStart
  } from "@/api/AppStart/AppStart.js";
  export default {
    components : {
      tableVue,
      dialogVue
    },
     data () {
       return JSON.parse(JSON.stringify(Data))
     },
     mounted () {
       this.getAppList();
       this.getChannel();
     },
     methods : {
       getChannel () {//获取子主渠道
         allChannel().then(res=>{
           if (res.data.code == 'OK') {
              this.lord = res.data.data;
           }
         })
       },
       getAppList (data) {//获取列表
         this.pageData.loading = true;
         appList(data).then(res=>{
           if (res.data.code == 'OK') {
             this.pageData.loading = false;
             this.total = res.data.data.total;
             this.list.tbody = res.data.data.records.map(item=>{
                 item.isOnline  = item.isOnline == 'Y' ?'是':'否';
                item.gmtCreate = this.switchTime(item.gmtCreate)
                item.gmtUpdate = this.switchTime(item.gmtUpdate)
                return item;
             });
           } else {
             this.$message.error(res.data.message);
             setTimeout(()=>{
               this.pageData.loading = false;
             },3000)
           }
         })
       },
       dialogs () {
         if (checkPermission('app_add_app') == true) {
             this.btnState = '1'
             this.dialog = true;
             this.selectedOptions = [];
             this.type = '';
             this.pageData = {};
         } else {
           this.$message.error("您没有权限添加");
         }
       },
       upload (file,fileList) {//拿到图片的地址
            let reader = new FileReader();
            reader.readAsDataURL(file.raw);
            reader.onload =  () => {
              this.pageData.pageImgUrl = reader.result.split(',')[1];
            }
       },
       changeData (val) {
          this.dialog = val
       },
       handleEdit(item,num){
         if (num == 1 && checkPermission('app_compile_app') == true) {
            this.fileList = [];
           this.dialog = true;
           var temp = {
             name : '',
             url : item.pageImgUrl
           }
           this.selectedOptions.push(item.channelId,item.childChannelId);
           this.pageData.value = item.isOnline;
           this.pageData.pageJumpUrl = item.pageJumpUrl;
           this.pageData.pageImgUrl = item.pageImgUrl;
           this.pageData.ordinal = item.ordinal;
           this.fileList.push(temp)
           this.startPageId = item.startPageId
            this.btnState = '2'


         } else if (num == 2 && checkPermission('app_delete_app') == true) {
              this.del();
         } else {
            this.$message.error("您没有权限操作");
         }
       },
       search () {
         var data = {
           current : '1',
           size : '10',
           isOnline : this.type,
         }
         this.getAppList(data)
       },
       handSize (val) {
         var data = {
           current : val,
           size : '10',
           isOnline : this.type,
         }
         this.getAppList(data)
       },
       selectionVal (val) {
         this.rowVal = val;
       },
       del () {
          if (this.rowVal.length < 1) {
              this.$message.error("请选择要删除的启动页");
          } else if (checkPermission('app_delete_app') == true) {
            let id = ''
            this.rowVal.map(item=>{
               id += item.startPageId + ','
            })
            id = (id.substring(id.length-1)==',')?id.substring(0,id.length-1):id;
            this.delMessage(()=>{
              delAppStart(id).then(res=>{
                if (res.data.code == 'OK') {
                  this.$message.success("删除成功");
                  this.getAppList();
                } else {
                  this.$message.error(res.data.message);
                }
              })
            })
          } else {
            this.$message.error("您没有权限删除");
          }
       },
       exceed (files, fileList) {
         this.$message.error("只能传一张图片");
       },
       compileForm () {
         this.$refs.ruleForm.validate((valid)=>{
           if (valid) {
             let channelId = '';
             let childChannelId = '';
             this.selectedOptions.map((item,index)=>{
               if (index == 0) {
                 channelId = item
               } else {
                 childChannelId = item;
               }
             })
              if (this.pageData.value == '是') {
                this.pageData.value = 'Y'
              } else {
                this.pageData.value = 'N'
              }
             let data = {
               channelId : channelId,
               childChannelId :childChannelId,
               pageImgUrl : this.pageData.pageImgUrl,
               pageJumpUrl : this.pageData.pageJumpUrl,
               isOnline :this.pageData.value,
               ordinal :this.pageData.ordinal,
               startPageId : this.startPageId
             }
             compileAppStart(data).then(res=>{
               if (res.data.code == 'OK') {
                  this.$message.success('编辑成功');
                  // this.pageData.dialog = false;
                  this.dialog = false;
                  this.getAppList();
               } else {
                  this.$message.error(res.data.message);
               }
             })
           }
         })

       },
       submitForm () {
         this.$refs.ruleForm.validate((valid)=>{
           if (valid) {
             let channelId = '';
             let childChannelId = '';
             this.selectedOptions.map((item,index)=>{
               if (index == 0) {
                 channelId = item
               } else {
                 childChannelId = item;
               }
             })
             let data = {
               channelId : channelId,
               childChannelId :childChannelId,
               pageImgUrl :this.pageData.pageImgUrl,
               pageJumpUrl : this.pageData.pageJumpUrl,
               isOnline :this.pageData.value,
               ordinal :this.pageData.ordinal,
             }
             addAppStart(data).then(res=>{
               if (res.data.code == 'OK') {
                  this.$message.success('新增成功');
                  // this.pageData.dialog = false;
                  this.dialog = false;
                  this.getAppList();
               } else {
                  this.$message.error(res.data.message);
               }
             })
           }
         })
       }
     }
  }
  </script>

<style scoped>
.search {
  width: 100%;
  background-color: #fff;
  padding:20px;
  box-sizing: border-box;
  margin-top: 10px;
}
.input {
  /* width: 300px; */
  display: flex;
  flex-wrap: wrap;
}
.input p {
  margin-top: 10px;
}
label {
  line-height: 40px;
  color: #333;
  margin: 0 10px;
}
.el-input {
  width:200px;
  height:20px;
}
.add {
  margin-top: 10px;
  padding-left: 14px;
}
.se {
  margin-left: 20px;
}
.confirm {
  position: absolute;
  bottom: -1px;
  right: 100px;
}
</style>
